<template>
    <Form ref="form" :model="form" :rules="ruleValidate" label-position="left" :label-width="100">

        <FormItem label="部门岗位" prop="datas">
            <Cascader v-model="form.datas" :data="userdata" filterable @on-change="yonghuData" :load-data="loadData"></Cascader>
        </FormItem>

        <FormItem label="用户" prop="user_id">
            <Select v-model="form.user_id" :multiple="!this.condition" placeholder="请选择用户">
                <Option v-for="(item,index) in userList" :value="item.id" :key="index">{{ item.teacher.teacher_name.zh }}</Option>
            </Select>
        </FormItem>

        <FormItem>
            <Button type="primary" :loading="btnload" @click="handleSubmit('form')">{{ condition?'修改':'添加' }}</Button>
        </FormItem>
    </Form>
</template>

<script>
export default {
    props: {
        condition: {
            type: [Boolean, Number],
            default: false
        }
    },
    data () {
        return {
            btnload: false,
            form:{
                department_id: null,
                position_id: null,
                user_id: [],
                type: 2,
                datas: [],
            },
            addurl: 'api/teacher/v1/cadreonduty/add',
            editurl: 'api/teacher/v1/cadreonduty/edit/' + this.condition,
            selUrl: 'api/teacher/v1/cadreonduty/find/' + this.condition,

            userdata: [],
            userList: [],
            url1: 'api/user/v1/get/all/department/list',
            url2: 'api/user/v1/get/position/list?department_id=',
            url3: 'api/user/v1/get/position/users?position_id=',
            
            ruleValidate: {
                user_id: [
                    { required: true, type: this.condition?'number':'array' , message: '请选择用户', trigger: 'change' }
                ],
                datas: [
                    { required: true, type: 'array', message: '请选择部门岗位', trigger: 'change' }
                ]
            },
        }
    },
    methods: {
        
        /************************************************************
         * 
         * 表单验证
         * @param   {name}            要验证的表单
         * 
         ************************************************************/
        handleSubmit (name) {
            this.$refs[name].validate((valid) => {
                if (valid) {
                    this.btnload = true
                    if (this.condition) {
                        this.editSubmit ()
                    } else {
                        this.addSubmit ()
                    }
                } else {
                    this.$Message.error('请检查填写内容');
                }
            })
        },
        
        /************************************************************
         * 
         * 执行添加数据
         * 
         ************************************************************/
        addSubmit () {
            let datas = JSON.parse(JSON.stringify(this.form))
            datas.department_id = datas.datas[0]
            datas.position_id = datas.datas[1]

            delete datas.datas

            this.$http.post(this.addurl, datas).then(val=>{
                this.btnload = false
                this.$emit('requery',true)
            }).catch(err => {
                this.btnload = false 
            })
        },
        
        /************************************************************
         * 
         * 执行修改数据
         * 
         ************************************************************/
        editSubmit () {
            let datas = JSON.parse(JSON.stringify(this.form))
            datas.department_id = datas.datas[0]
            datas.position_id = datas.datas[1]

            delete datas.datas
            this.$http.post(this.editurl, datas).then(val=>{
                this.btnload = false
                this.$emit('requery',true)
            }).catch(err => {
                this.btnload = false 
            })
        },
        
        /************************************************************
         * 
         * 级联选择（部门）
         * 
         ************************************************************/
        departmentData () {
            this.$http.get(this.url1).then(val=>{
                this.userdata = val.data.map(el => {
                    let obj ={
                        value: el.id,
                        label: el.department_name.zh?el.department_name.zh:el.department_name.mn,
                        children: [],
                        loading:false
                    }
                    return obj
                })
            }).catch(err => {
            })
        },
        
        /************************************************************
         * 
         * 级联选择（岗位）
         * 
         ************************************************************/
        loadData (item, callback) {
            item.loading = true
            this.$http.get(`${this.url2}[${item.value}]`).then(val=>{
                item.children = val.data.map(el => {
                    let obj ={
                        value: el.id,
                        label: el.position_name.zh?el.position_name.zh:el.position_name.mn
                    }
                    return obj
                })
                item.loading = false
                callback();
            }).catch(err => {
                item.loading = false
            })
        },
        
        /************************************************************
         * 
         * 级联选择（用户）
         * 
         ************************************************************/
        yonghuData (item) {
            this.form.user_id = []
            this.userList = []
            this.$http.get(`${this.url3}[${item[1]}]`).then(val=>{
                this.userList = val.data
            }).catch(err => {
            })
        },
        
        /************************************************************
         * 
         * 单条数据查询（修改）
         * 
         ************************************************************/
        selData () {
            let params = {
                type: 2
            }
            this.$http.get(this.selUrl, { params }).then(val=>{
                let datas = val.data
                this.form.datas = [datas.department_id, datas.position_id]
                this.yonghuData(this.form.datas)
                setTimeout(() => {
                    this.form.user_id = datas.user_id
                }, 2000)
            }).catch(err => {
            })
        }
    },
    created () {
        if (this.condition) this.selData ()
        this.departmentData ()
    },
}
</script>